import React, { Component, cloneElement } from 'react'
import { render } from 'react-dom'
import {
  Router,
  Route,
  hashHistory,
  IndexRoute,
} from 'react-router'
import {
  Homepage,
  ComponentNotFound,
} from 'component/public'
import { MicroTrade } from 'component/trade'
import {
  RechargePage,
  PositonList,
  TransactionList,
  InOutPage,
  GiftCoupon,
  ExpTicket,
  BankcardList,
  AccountPage,
  Withdraw,
} from 'component/account'
import { FinancePage } from 'component/finance'

import 'static/less/app'

class App extends Component {
  componentDidMount() {
    if (document.getElementById('splash')) {
      document.body.removeChild(document.getElementById('splash'))
    }
  }
  render() {
    const { children } = this.props
    return (
      <div className={`rt-app-container`}>
        {cloneElement(children)}
      </div>
    )
  }
}

const routes = (
  <Route path="/" component={App}>
    <IndexRoute component={Homepage} />
    <Route path="/micro" component={MicroTrade} />
    <Route path="/account" component={AccountPage} />
    <Route path="/recharge" component={RechargePage} />
    <Route path="/positions" component={PositonList} />
    <Route path="/transactions" component={TransactionList} />
    <Route path="/in-out" component={InOutPage} />
    <Route path="/finance" component={FinancePage} />
    <Route path="/gift-coupon" component={GiftCoupon} />
    {/*experience ticket*/}
    <Route path="/exp-ticket" component={ExpTicket} />
    <Route path="/bankcard-list" component={BankcardList} />
    <Route path="/withdraw" component={Withdraw} />
    <Route path="*" component={ComponentNotFound} />
  </Route>
)

render(
  <Router history={hashHistory} routes={routes} />,
  document.getElementById('app')
)